<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="expires" content="no-cache">
<title>Insert title here</title>
<%
	//防止浏览器产生缓存
	response.setHeader("Pragma","No-Cache"); 
	response.setHeader("Cache-Control","No-Cache"); 
	response.setDateHeader("Expires", 0); 

	//定义基础路径，从DispatcherServlet获取数据
	String path = request.getContextPath() + "/";	
	String resourcesPath = path + "resources/";
	String omPath = resourcesPath + "operamasks-ui-2.0/";		
	
%>
<link href="<%=omPath%>css/default/om-default.css" rel="stylesheet"	type="text/css" />
<script src="<%=omPath%>js/jquery.min.js" type="text/javascript"></script>
<script src="<%=path%>resources/sm/js/jquery.xml2json.js" type="text/javascript"></script>
<script src="<%=omPath%>js/operamasks-ui.min.js" type="text/javascript"></script>
<script src="<%=path%>resources/sm/js/om-dialog-url.js" type="text/javascript"></script>
<style type="text/css">
	.search-button, .my-text{
	padding-left: 30px;
	padding-top: 9px;
	}
	
   	.myinput input{
    border:1px solid;
    border-color:lightblue;
    height: 18px;
    width : 160px;
   	}
   	.myinput input:focus{border: 1px solid #3A76C2;}
 
   .mytable .mytable-left{
   text-align: right;
   width : 100px;
   }
  .mytable .mytable-right{
   width : 150px;
   }
</style>
<script type="text/javascript">
//集中获取ModelAndView数据
var path = "${pageContext.request.contextPath}" + "/";

var searchPanel = null;
var searchField = null;
var searchButton = null;
var maintTool = null;
var grid = null;
//设置表格操作提交的网址
var searchUrl = path + "rm/filterQuery.html";

$(function(){
	initVar();
	initLayout();
	initSearchPanel();
	initGrid();
	initComponent();
	search();
});

function initVar(){
	maintool = $("#maintool");
	searchPanel = $("#search-panel");
	searchField = $("#search-field");
	searchButton = $("#search-button");
	grid = $("#mainGrid");
}
function initLayout(){
	$('#page').omBorderLayout({
		panels : [ {
			id : "center-panel",
			header : false,
			region : "center",
			resizable : true,
		}],
	});
	searchPanel.omPanel({
		title : "搜索",
		collapsible : true,
		height : 200
	});
}
function initSearchPanel(){
	$(':input',searchField).each(function() {
		$(this).keyup(function(event) {
			if (event.keyCode == 13) {
				search();
			}
		});
	});
	searchButton.omButton({
		icons:{left : path + 'resources/sm/images/search.png'},
		width:70,
		onClick:function(){
			search();
		}
	});
}
function initGrid(){
	grid.omGrid({
		limit : 30,
		title : '料仓出入记录',
		singleSelect : true,
		height:480,
		colModel : [
				{header : '从料仓', name : 'fromStorageId', align : 'center', width : '70', sort:'serverSide'},
				{header : '到料仓', name : 'toStorageId', align : 'center', width : '70', sort:'serverSide'},
				{header : '计量单号', name : 'measureId', align : 'center', width : '70', sort:'serverSide'},
				{header : '物料编码', name : 'materialId', align : 'center', width : '70', sort:'serverSide'},
				{header : '重量', name : 'weight', align : 'center', width : '70', sort:'serverSide'},
				{header : '事件', name : 'event', align : 'center', width : '70', sort:'serverSide'},
				{header : '时间戳', name : 'timeStamp', align : 'center', width : '70', sort:'serverSide'},
				{header : '计算机地址', name : 'idAddr', align : 'center', width : '70', sort:'serverSide'},
		            ],
	});
}
function initComponent(){
	$('#queryEvent').omCombo({
		dataSource : [ {
			text : '收货',
			value : 'RECEIVE'
		}, {
			text : '退货',
			value : 'RETURN'
		} , {
			text : '下料',
			value : 'STOCK'
		} , {
			text : '上料',
			value : 'LOAD'
		} , {
			text : '退料',
			value : 'UNDO-LOAD'
		} , {
			text : '盘盈',
			value : 'INVENTORY_PROFIT'
		} , {
			text : '盘亏',
			value : 'INVENTORY_LOSSES'
		} ],
		inputField:function(data,index){
		    return data.text+'('+data.value+')';
		},
		width : 163
	});
	$("#queryTimeStampS").omCalendar({showTime : true});
	$("#queryTimeStampE").omCalendar({showTime : true});
	$("#queryTimeStampS").css("width","140px");
	$("#queryTimeStampE").css("width","140px");
}
function search()
{	
	var rules =[], i=0;
	$(':input',searchField).each(function() {
		if($.trim(this.name)!="")
			if( $(this).val() != null &&  $.trim($(this).val()) != "" 
					&& typeof($(this).attr('op')) != "undefined" && typeof($(this).attr('ty')) != "undefined")
				rules[i++] = {op : $(this).attr('op'), field : $(this).attr('name'), value : $(this).val(), type : $(this).attr('ty')};
	});
	var group ={
			op : "and",
			rules : rules
	};
	var extraData = {
			"domain" : "SmRmMeasureDocLog",
			"rules" : i==0?null:JSON.stringify(group),
	};
	grid.omGrid({
		dataSource : searchUrl,
		extraData : extraData, 
		method:'POST'
	}, 'reload');
	
}
</script>
</head>
<body>
	<div id="page" style="height:690px;">
		<div id="center-panel">
		<div id="search-panel" > 
			<div id="search-field">
			<table id="searchTable" class="mytable">
					<tr>
						<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">从料仓号：</font></span></td>
						<td class="mytable-right"><span class="myinput"><input id="queryFromStorageId" name="fromStorageId" op="startwith" ty="string" type="text"/></span></td>
						<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">计量单号：</font></span></td>
						<td class="mytable-right"><span class="myinput"><input id="queryMeasureId" name="measureId" op="equal" ty="startwith" type="text"/></span></td>
						<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">物料编码：</font></span></td>
						<td class="mytable-right"><span class="myinput"><input id="queryMaterialId" name="materialId" op="equal" ty="startwith" type="text"/></span></td>
					</tr>
					<tr>
						<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">从时间：</font></span></td>
						<td class="mytable-right"><span class="myinput"><input id="queryTimeStampS" name="timeStamp" op="greaterorequal" ty="date" type="text"/></span></td>
						<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">到时间：</font></span></td>
						<td class="mytable-right"><span class="myinput"><input id="queryTimeStampE" name="timeStamp" op="lessorequal" ty="date" type="text"/></span></td>
						<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">事件：</font></span></td>
						<td class="mytable-right"><span class="myinput"><input id="queryEvent" name="event" op="equal" ty="string" type="text" /></span></td>
					</tr>
				</table>
			</div>		
			<div class="search-button"><span id="search-button">搜索</span></div>
			<div class="my-text">
				<p>正常流程：<b>RECEIVE</b>(收货); <b>STOCK</b>(下料); <b>LOAD</b>(上料)</p>			
				<p>其它情况：<b>RETURN</b>(退货); <b>UNDO-LOAD</b>(退料); <b>INVENTORY_PROFIT</b>(盘盈); <b>INVENTORY_LOSSES</b>(盘亏)</p>
			</div>					
		</div>	
		<div id="maintool"></div>
		<table id="mainGrid"></table>
		</div>
	</div>	
</body>
</html>